<template>
	<div class="line-list" v-for="item in data">
		<div class="line-list-icon">
			<el-avatar :size="50" :src="item.avatar?item.avatar:require('../assets/image/icon-defalut.png')" @error="(e)=>{e.target.src = require('../assets/image/icon-defalut.png')}" />
			<div class="line-list-icon-title">
				<h2>{{item.nickName}}</h2>
				<p>{{item.create_time}}</p>
			</div>
		</div>
		<div class="line-list-info">
			{{item.content}}
		</div>
		<div class="secondary_comments" v-if="item.children.length > 0">
			<div class="secondary_comments_list" v-for="val in item.children">
				<div class="line-list-icon">
					<el-avatar :size="30" :src="val.avatar?val.avatar:require('../assets/image/icon-defalut.png')"  @error="(e)=>{e.target.src = require('../assets/image/icon-defalut.png')}" />
					<div class="line-list-icon-title">
						<h2>{{val.nickName}}<strong v-if="val.be_nickName">@</strong>{{val.be_nickName?`${val.be_nickName}`:''}}</h2>
						<p>{{val.create_time}}</p>
					</div>
				</div>
				<div class="line-list-info">
					{{val.content}}
				</div>
			</div>
		</div>
		<div class="line-list-title" @click="communityClick(item)">
			标题：{{item.title}}
		</div>
		
	</div>
</template>

<script lang="ts" setup>
	import {reactive} from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter();
	const props = defineProps({
		data: Array,
	})
	const communityClick = (item)=>{
		router.push({ path: '/communityDetail', query: { id: item.community_id }})
	}
</script>

<style lang="scss">
	.line-list{
		width:60%;
		border-radius: 5px;
		padding: 20px;
		box-sizing: border-box;
		margin-bottom: 20px;
		border: 1px solid #eee;
		box-shadow: 0 0 30px 0 #eee;
		border-radius: 5px;
		background: white;
		 &-icon{
			 width: 100%;
			 display: flex;
			 justify-content: flex-start;
			 align-items: center;
			 flex-direction: row;
			 
			 
			 &-title{
				 margin-left: 5px;
				 display: flex;
				 align-items: flex-start;
				 flex-direction: column;
				 padding: 20px 0;
				 color: var(--main-font-color);
				h2{
					font-size: 13px;
					margin: 0 0 10px 0;
				}
			   p{
					font-size: 12px;
					margin: 0;
					color: #9094a0;
			   }
			 }
		 }
		 
		 &-info{
			 width: 100%;
			 box-sizing: border-box;
			 font-size: 13px;
			 letter-spacing: 1px;
			 color: var(--main-font-color);
			 line-height: 20px;
			 padding-left: 10px;
		 }
		 .line-list-title{
			 background-color: #eee;
			 padding: 10px 5px;
			 box-sizing: border-box;
			 cursor: pointer;
			 margin-top: 10px;
			 color: #9094a0;
			 border-radius: 5px;
		 }
		 // 二级评论
		 .secondary_comments{
			 width: 100%;
			 background: #eee!important;
			 border-radius: 5px;
			 padding: 10px 0;
			 margin-top: 10px;
			 .secondary_comments_list{
				 @extend  .line-list;
				 width: 100%;
				 margin-bottom: 0!important;
				 padding: 0 20px;
				 background-color: transparent;
				 .line-list-icon-title{
					 font-size: 12px;
					 padding-bottom: 10px;
					 strong{
						 color: rgb(59, 115, 240);
						 font-size: 16px;
					 }
				 }
				 .line-list-info{
					 padding-left: 35px;
				 }
				 .el-avatar--circle{
					 border-radius: 60%;
				 }
			 }
		 }
	}
</style>
